<template>
  <div class="content">
    <div class="banaer">
      <div class="container">
        <div class='head'>漫画 — {{$route.query.n}}
          <span class="add">
            <el-button type="danger" size="mini" @click="goLink('/pubchapter',$route.query.cid,null,$route.query.n)">
              <i class="el-icon-upload" style="font-size:16px">上传</i>
            </el-button>
          </span>
        </div>
        <el-table :data="tableData"style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left">
                <el-form-item label="预览">
                  <img :src="props.row.content" width="800"/>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="序号">
              <template slot-scope="scope">
                <a v-if="!scope.row.state" @click="goLink('/pubchapter',$route.query.cid,scope.row.sid,$route.query.n)">第{{scope.row.chapter}}章</a>
                <a v-else>第{{scope.row.chapter}}章</a>          
              </template>
          </el-table-column>
          <el-table-column label="章节" prop="title">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope" >
              <el-tag color='#F0F8FF' type="info" v-if="scope.row.flag">发布</el-tag>
              <el-tag color='#FFF5EE' type="info" v-if="!scope.row.flag">存稿</el-tag>
              <el-tag color='#F0F8FF' type="info" v-if="scope.row.flag&&scope.row.state">通过</el-tag>
              <el-tag color='#FFF5EE' type="info" v-if="scope.row.flag&&!scope.row.state">待审</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="156" getLocalTime :formatter="dateFormat" prop="date">
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-popover ref="popover{{$index}}" class="aew" placement="top" >
                <p>删除 {{ scope.row.title }} ？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="cancel()">取消</el-button>
                  <el-button size="mini" type="danger" round @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
              </el-popover>
              <el-button size="mini" v-if="!scope.row.state" type="danger" v-popover:popover{{$index}} ><i class="el-icon-delete"/></el-button>
              <p v-else><el-tag color='#F0F8FF' type="info">已更新</el-tag></p>
            </template>
          </el-table-column>
        </el-table>
        <div class="pager">
          <el-pagination v-show="totalCount!==0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      searchParam: {},
      currentPage: 1,
      totalCount: 0,
      tableData: []
    }
  },
  created() {
    this.searchParam.param = this.$route.query.cid
    this.getData()
  },
  methods: {
    handleCurrentChange(val) {
      this.searchParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    handleDelete(index, row) {
      document.querySelector("#app").click()
      var _this = this
      this.$ajax.post('/api/deleteSection?id='+row.sid).then(function(response){
        if(response.data.code === 0) 
        _this.$message({message: response.data.data,type: 'success'});
        _this.getData()
      }).catch(function(error){console.log(error)})
    },
    dateFormat(row, column) {  
      return this.getDateTime(row[column.property])
    },
    getData() {
      var _this = this
      this.$ajax.post('/api/getSection',_this.searchParam).then(function(response){
        _this.tableData = response.data.data.content
        _this.totalCount = response.data.data.totalElements
        console.log(response.data)
      }).catch(function(error){console.log(error)})
    },
    cancel() {
      document.querySelector("#app").click()
    },
    goLink(path,cid,param,param2) {
      this.$router.push({ 
        path: path,
        query:{cid: cid,id: param,n: param2}
      })
    }
  }
}
</script>

<style lang='stylus' rle='stylesheet/stylus'>
.banaer
  padding-top 10px
  // background url(../images/new/m_banner_bak1.png)
  background-position top center
  background-repeat no-repeat
  min-width 1000px
  .container
    width 1000px
    margin 0 auto
    overflow hidden
    position relative
    .userCenterBar
      background-color #fff
      margin 20px 0
a
  text-decoration none
a:hover
  cursor pointer
  color #ff3860
.head
  font-size 18px
  margin-bottom 14px
  .add
    margin-left 30px
.el-tag--info
  border-color #fff
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pagination
  color #909399
.el-pager li.active
  color	#FFB6C1
.pager
  margin 35px
  text-align center
</style>
